<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <input type="text" v-model="todo"/>
    <button @click="doAdd()">+增加</button>
    <br><br><br>
    <ul>
      <li v-for="(item ,key ) in list" :key="key">
        {{item}}    <button @click="removeData(key)">删除</button>
      </li>
    </ul> -->

    <input type="text" v-bind="todo" @keydown="doAdd($event)" />
    <br>
    <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()">{{item.title}}  ---<button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <br>
    <h2>已完成</h2>
    <ul class="finish">
      <li  v-for="(item,key) in list" :key="key" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()">{{item.title}} ---<button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <br>
    <h2 v-if="ok">这是一个ok</h2>
    <h2 v-if="!ok">这是一个no</h2>
    <br>
    <button @click="getList">获取list的值</button>
  </div>
</template>

<script>
//引入文件
import storage from './model/storage.js';
export default {
  name: 'app',
  data () {
    return {
      //msg: 'Welcome to Your Vue.js App'
      todo:'',
      ok:false,
       //list:[]
       list:[
         {
           title:'nodejs学习中',
           checkbox:true
         },
         {
           title:'vuejs学习中',
           checkbox:false
         }
       ]
    }
  },
  methods:{
    doAdd(e){
      //获取文本框输入的值
      //把文本框的值push到list里面
      // this.list.push(this.todo);
      // this.todo = '';
      console.log(e.keyCode);
      if(e.keyCode==13){
        this.list.push({
          title:this.todo,
          checkbox:false
        })
       // this.todo='';
      }
      //保存
      //localStorage.setItem('list',JSON.stringify(this.list))
      //模块化之后的
      storage.set('list',this.list);
    },
    removeData(key){
      //splice  js操作数组的方法
      this.list.splice(key,1);
      //保存
      //localStorage.setItem('list',JSON.stringify(this.list))
      storage.set('list',this.list);
    },
    //保存的方法
    saveList(){
      //localStorage.setItem('list',JSON.stringify(this.list));
      storage.set('list',this.list);
    },
    //声明周期函数，vue页面刷新会触发的方法
    mounted(){
     // var list = JSON.parse(localStorage.getItem('list'));
     //模块化之后
     var list = storage.get('list');
      if(list){
        //注意判断
        this.list = list;
      }
    },
    getList(){
      console.log(this.list)
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
